<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
  <title>做一个简单的图表柱形图</title>
</head>

<body>
  <svg width="960" height="600" style="border:1px solid grey"></svg>

  <script>
    // 数据准备
    var marge = { top: 60, bottom: 60, left: 60, right: 60 }//设置边距
    var dataset = [250, 210, 170, 130, 90];  //数据（表示矩形的宽度）


    // 得到svg画布，并创建分组
    var svg = d3.select("svg");//得到svg画布
    var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
      .attr("transform", "translate(" + marge.top + "," + marge.left + ")");


    // 画出矩形
    var rectHeight = 40;//设置每一个矩形的高度

    g.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", 40)//设置左上点的x
      .attr("y", function (d, i) {//设置左上点的y，d为值
        console.log("d",d)
        return i * rectHeight;
      })
      .attr("width", function (d) {//设置宽
        console.log("width-d",d)
        return d;
      })
      .attr("height", rectHeight - 5)//设置长
      .attr("fill", "blue");//颜色填充
  </script>
</body>

</html>
